<template>
    <div class="column-container">
        <div ref="monthWorkOrder" class="echarts-box" style="width: 600px; height: 300px; border: 1px solid red"></div>
    </div>
</template>

<script>
    export default {
        name: "VcircleStatisTics",
        data(){
            return{

            }
        },
        mounted() {
            this.initMonthWorkOrder()
        },
        methods: {
            // 月工单处理数
            initMonthWorkOrder() {
                let myChart = this.$echarts.init(this.$refs.monthWorkOrder)
                let options = {
                    tooltip: {
                        backgroundColor: 'rgba(204, 221, 255, 0.6)',
                        trigger: 'axis',
                        borderColor: '#CCDDFF',
                        textStyle: { color: '#2562DC' }
                    },
                    color: ['#635df7', '#f15d5d'],
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#D3D8DD'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '维修',
                            type: 'bar',
                            barWidth: 10,
                            data: [141, 39, 10, 16, 79, 116, 67, 104, 12, 36, 20, 128]
                        },
                        {
                            name: '保养',
                            type: 'bar',
                            barWidth: 10,
                            data: [36, 124, 112, 87, 16, 28, 80, 24, 112, 146, 127, 105]
                        }
                    ]
                }
                myChart.setOption(options)
            }
    }
    }
</script>

<style scoped>
    .column-container {
        height: 100%;
    }
</style>